// 3、了解Vue3数据劫持的主力（已经放弃兼容了IE）
// ES6的Proxy和Reflect是如何工作的

import {
    log
} from "./playground.js";


let person = {
    name: 'Leon',
    age: 18
};

// 传作的第二个参数成为handler、Vue3源码中也有针对各种数据类型设置的多种handler
// handler的各项属性我们往往又称为trap；即陷阱函数的意思

let proxyPerson = new Proxy(person, {
    get(target, key, receiver) {// 在传入receiver的情况下可以使用Reflect反射
        // Vue3中使用反射则是有考虑后续代理实例的this指向的问题
        console.log(`代理对象的get被触发。`);
        return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
        console.log(`对象的set被触发。key:`, key, `value:`, value);
        return Reflect.set(target, key, value, receiver);
    }
});

// 测试用例3  看看输出了什么
log(proxyPerson.name, 1);
proxyPerson.name; 
proxyPerson.name = 'Jack';
log(proxyPerson.name);